<template>
  <div>
    <!-- 筛选、搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="模糊搜索">
            <el-input
              v-model="formInline.query_str"
              placeholder="请输入"
              clearable
            />
          </el-form-item> -->
      <el-form-item label="专家组">
        <el-select v-model="formInline.project_group" placeholder="专家组">
          <el-option
            v-for="item in projectGroups"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCurrentChange(1)"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="dialogFormVisible = true"
          >新增批次</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div v-if="tableData.length > 0">
    <el-table
      ref="multipleTableRef"
      v-loading="tabLoading"
      :data="tableData"
      border
      style="width: 100%"
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="batch_name" label="批次名称" width="160" />
      <el-table-column prop="group_name" label="批次所属专家组" width="150" />
      <el-table-column
        prop="project_batch.length"
        label="批次项目数"
        width="100"
      />
      <el-table-column
        :prop="createTime"
        label="创建时间"
        width="180"
        :formatter="tableDateFormatter"
      />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon-color="#626AEF"
            title="确认删除?"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button
                border
                type="danger"
                size="small"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block items-center justify-center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="cnt"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div v-if="tableData.length == 0">
    <el-empty description="无记录" />
  </div>

  <el-dialog v-model="dialogFormVisible" title="新增批次">
    <el-form :model="batchForm">
      <el-form-item label="所属专家组" label-width="140px">
        <el-input v-model="formInline.project_group" disabled />
      </el-form-item>
      <el-form-item label="批次名称" label-width="140px">
        <el-input v-model="batchForm.batch_name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddBatch"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, onUpdated, reactive, ref } from "vue";

import {
  getUserGroups,
  download_file,
  createBatch,
  getBatches,
  deleteBatch,
} from "@/api/apiv1";
import { formatDate, message } from "@/composables/util";

import FormDrawer from "@/components/FormDrawer.vue";

const tabLoading = ref(false);

const tableData = ref([]);
const cnt = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const formDrawerRef = ref(null);
const detailProject = reactive({});

const projectGroups = ref([]);

const projectLogs = ref([]);

const formInline = reactive({
  project_group: "",
});
const dialogFormVisible = ref(false);
const batchForm = reactive({
  batch_name: "",
});

const multipleSelection = ref([]);

const handleSelectionChange = (v) => {
  multipleSelection.value = v;
};

// 增加批次
const handleAddBatch = () => {
  createBatch(formInline.project_group, batchForm.batch_name).then((res) => {
    if (res.code != 200) {
      message(res.msg, "error");
    } else {
      message("添加成功!", "success");
      dialogFormVisible.value = false;
      getData();
    }
  });
};

const tableDateFormatter = (row, column) => {
  return formatDate(row.createTime);
};

const init = () => {
  getUserGroups().then((res) => {
    projectGroups.value = res.data;
    formInline.project_group = projectGroups.value[0];
  });
};

const getData = () => {
  tabLoading.value = true;
  getBatches(formInline.project_group).then((res) => {
    cnt.value = res.data.cnt;
    tableData.value = res.data.records;
    tabLoading.value = false;
  });
};

onMounted(() => {
  init();
});

const handleSizeChange = (v) => {
  pageSize.value = v;
  getData();
};
const handleCurrentChange = (v) => {
  currentPage.value = v;
  getData();
};

const handleDelete = (id) => {
  console.log(id);
  deleteBatch(id).then((res) => {
    if (res.code != 200) {
      message(res.msg, "error");
    } else {
      message("删除成功！");
      getData();
    }
  });
};
</script>
